<template>
    <el-card style="width: 100%">
   <div>
       <div class="warp_l__34yS8">
          ♊&nbsp;&nbsp;<span class="work__00001">工作经历</span>
        </div>
      <el-button type="text" @click="addwork">添加工作经历</el-button><br>
       <div v-if="pd!=0">
    <el-form style="padding-left: 30px" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="公司名称" prop="name">
    <el-input v-model="dataForm.name" placeholder="公司名称" style="width: 100%;"></el-input>
    </el-form-item>
    <el-form-item label="公司行业" prop="industry">
      <el-input v-model="dataForm.industry" placeholder="公司行业"  @click.native="openindus" style="width: 100%;"></el-input>
    </el-form-item>
    <el-form-item label="所属部门" prop="department">
      <el-input v-model="dataForm.department" placeholder="所属部门" style="width: 43%;"></el-input>
      <font style="line-height: 40px;padding-left: 30px">职位类型</font>
      <el-cascader
                    placeholder="职位类型"
                    :props="{ value: 'id',label:'name' }"
                    style="width: 43%"
                    v-model="type1"
                    :options="positionOptions"
                    :show-all-levels="false"
                  ></el-cascader>
    </el-form-item>
    <el-form-item label="职位名称" prop="positionName">
      <el-input v-model="dataForm.positionName" placeholder="职位名称" style="width: 43%;"></el-input>
    </el-form-item>
    <el-form-item label="在职时间">
      <el-date-picker type="date" placeholder="入职时间" v-model="dataForm.inDate" style="width: 20%;"></el-date-picker>
      <el-date-picker type="date" placeholder="离职时间" v-model="dataForm.outDate" style="width: 20%;margin-left:20px;"></el-date-picker>
  </el-form-item>
    <el-form-item label="工作内容" prop="content">
      <el-input type="textarea" v-model="dataForm.content"></el-input>
    </el-form-item>
    <el-form-item >
       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </el-form-item>
    </el-form>

    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%">
    <div>
    <el-checkbox-group v-model=" dynamicTags" >
      <el-checkbox-button @change="pdd"  v-for="city in industrylist" :label="city.name" :key="city.name"  v-if="city.id==1" aria-disabled="true" >{{city.name}}</el-checkbox-button><br><br>
      <el-checkbox-button @change="pdd"  v-for="city in industrylist" :label="city.name" :key="city.name"  v-if="city.pid==1" >{{city.name}}</el-checkbox-button><br><br>
    </el-checkbox-group>
    <el-checkbox-group v-model=" dynamicTags" >
      <el-checkbox-button @change="pdd"  v-for="city in industrylist" :label="city.name" :key="city.name"  v-if="city.id==2" >{{city.name}}</el-checkbox-button><br><br>
      <el-checkbox-button @change="pdd"  v-for="city in industrylist" :label="city.name" :key="city.name"  v-if="city.pid==2" >{{city.name}}</el-checkbox-button><br><br>
    </el-checkbox-group>
     <el-checkbox-group v-model=" dynamicTags" >
      <el-checkbox-button @change="pdd" v-for="city in industrylist" :label="city.name" :key="city.name"  v-if="city.id==3" >{{city.name}}</el-checkbox-button><br><br>
      <el-checkbox-button @change="pdd" v-for="city in industrylist" :label="city.name" :key="city.name"  v-if="city.pid==3" >{{city.name}}</el-checkbox-button><br><br>
    </el-checkbox-group>
     <el-checkbox-group v-model=" dynamicTags" >
      <el-checkbox-button @change="pdd" v-for="city in industrylist" :label="city.name" :key="city.name"  v-if="city.id==4" >{{city.name}}</el-checkbox-button><br><br>
      <el-checkbox-button @change="pdd" v-for="city in industrylist" :label="city.name" :key="city.name"  v-if="city.pid==4" >{{city.name}}</el-checkbox-button><br><br>
    </el-checkbox-group>
    <el-tag
  :key="tag"
  v-for="tag in dynamicTags"
  closable
  :disable-transitions="false"
  @close="handleClose(tag)"
  >
  {{tag}}
</el-tag>
<el-input
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"

>
</el-input>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="industryfz">确 定</el-button>
  </span>
</el-dialog>
       </div>
       <!-- @mouseover="seencenter" @mouseout="seenend" style="width:700px; height:100px" v-for="(item,index) in list1" :key="index" -->
    <div v-if="pd==0" @mouseover="seencenter" @mouseout="seenend" style="padding-top:20px" v-for="(item,index) in list1" :key="index"  class="mod-config">
        <font style="padding-left:5px;float: right" v-if="!seen">项目周期：{{editDateTime(item,item.inDate)}}至:{{editDateTime(item,item.outDate)}}</font>
        <a v-if="seen" style="margin-right: 50px;float: right;">
          <img style="width: 20px; height: 20px" @click="deleteHandle(item.id)" class="icon_d__8fzmg" alt="" src="">
        </a>
        <a v-if="seen" style="margin-right: 50px;float: right;">
          <img style="width: 20px; height: 20px" @click="addOrUpdateHandle(item)" class="icon_e__36ON5" alt="" src="">
        </a>
     <div style="width:500px">
       <img style="width:50px; height:50px;float:left" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
       <font style="height-line:25px;padding-left:10px">{{item.name}}<br></font>
      <font style="height-line:25px;padding-left:10px;">{{item.department}}|{{item.positionName}}</font>
     </div>
     <div style="width:500px;padding-top:10px">{{item.industry}}</div>
     <div style="width:500px">{{item.content}}</div>
    <!-- <el-table
      :data="list1"
      style="width: 100%;">
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="公司名称">
      </el-table-column>
      <el-table-column
        prop="industry"
        header-align="center"
        align="center"
        label="公司行业">
      </el-table-column>
      <el-table-column
        prop="department"
        header-align="center"
        align="center"
        label="所属部门">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="职位类型">
        <template slot-scope="obj">
          {{editType(obj.row.type)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="positionName"
        header-align="center"
        align="center"
        label="职位名称">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="入职时间">
        <template slot-scope="obj">
          {{editDateTime(obj.row,obj.row.inDate)}}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="离职时间">
        <template slot-scope="obj">
          {{editDateTime(obj.row,obj.row.outDate)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        header-align="center"
        align="center"
        label="工作内容">
      </el-table-column>
      <el-table-column
        prop="resumeId"
        header-align="center"
        align="center"
        label="父ID">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
     </el-table> -->
   </div>
   </div>
    </el-card>

</template>

<script>
import ueditor from 'ueditor'
import moment from 'moment'
  export default {
    name:'workexperience',
    inject:['reload'],
    data () {
      return {
        type1:[],
        resume:{},
        positionOptions: [],//职位数据
        positionOptionsOne: [],
        dis:false,
        a:0,
        ueId: `J_ueditorBox_${new Date().getTime()}`,
        pd:0,
        visible: false,
        inputVisible: false,
        inputValue: '',
        list1:[],
         dynamicTags: [],
         seen:false,
        dataForm: {
           id: 0,
          name: '',
          industry: '',
          department: '',
          type:'',
          positionName: '',
          inDate: '',
          outDate: '',
          content: '',
          resumeId: ''
        },
        industrylist:[],
        dialogVisible:false,
        dataRule: {
          name: [
            { required: true, message: '公司名称不能为空', trigger: 'blur' }
          ],
          department: [
            { required: true, message: '所属部门不能为空', trigger: 'blur' }
          ],
          positionName: [
            { required: true, message: '职位名称不能为空', trigger: 'blur' }
          ],
          inDate: [
            { required: true, message: '入职时间不能为空', trigger: 'blur' }
          ],
          outDate: [
            { required: true, message: '离职时间不能为空', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '工作内容不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      seencenter(){
        this.seen = true;
      },
      seenend(){
        this.seen = false;
      },
      editDateTime(row,column){//日期格式处理
          const date = column
          if (date === undefined) {
              return ''
          }
          return moment(date).format('YYYY-MM-DD')
      },
      editType(val){
        val = JSON.parse(val);
        val=val[val.length-1];
        for(let i=0;i<this.positionOptionsOne.length;i++){
          let data = this.positionOptionsOne[i];
          if(data.id==val){
            return data.name;
          }
        }
      },
     addwork(){
       if(this.pd==0){
         this.pd=1;
       }else if(this.pd==1){
         alert("离开类容将会丢失");
         this.reload();//到时候该路径
         this.pd=0;
       }
     },

      dataFormSubmit () {


        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
             this.pd=0;
        this.dataForm.type=JSON.stringify(this.type1);
        //this.dataForm.resumeId=JSON.parse(localStorage.getItem("user")).userId;
         this.dataForm.resumeId = JSON.parse(localStorage.getItem("resume")).id;
            this.$http({
              url: this.$http.adornUrl(`/resume/workexperience/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'name': this.dataForm.name,
                'industry': this.dataForm.industry,
                'department': this.dataForm.department,
                'type': this.dataForm.type,
                'positionName': this.dataForm.positionName,
                'inDate': this.dataForm.inDate,
                'outDate': this.dataForm.outDate,
                'content': this.dataForm.content,
                'resumeId': this.dataForm.resumeId
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
              } else {
                this.$message.error(data.msg)
              }
            })
            this.visible = false
           this.reload();
          }
        })
      },
      openindus(){
        this.dialogVisible=true;
        this.$http({
          url:this.$http.adornUrl(`/resume/workexperience/findindustry`),
          method:'get'
        }).then(({data})=>{
              this.industrylist=data;
        })
      },
      industryfz(){

      for(let index in this.dynamicTags){
       this.dataForm.industry=this.dynamicTags[index]+" "+this.dataForm.industry;
      
      }
       alert(this.dataForm.industry)
      this.dynamicTags=[];
      this.a=0;
        this.dialogVisible=false;
      },
      pdd(){
        this.a=this.dynamicTags.length;
        if(this.dynamicTags.length>3){
          alert("不能大于3");
          this.dialogVisible=false;
        }
      },
      async find(){
        //this.dataForm.resumeId=JSON.parse(localStorage.getItem("user")).userId;
         this.dataForm.resumeId = JSON.parse(localStorage.getItem("resume")).id;
        this.findpostion();
         await this.$http({
            url: this.$http.adornUrl(`/resume/workexperience/list/${this.dataForm.resumeId}`),
            method:'get',
         }).then((res)=>{
           if(res.data!=''){
           this.list1=res.data;
             this.$emit('resumTest')
           }

         })
      },

      editData(val){//处理流数据
      for (let i=0;i<val.length;i++){
        if (val[i].children.length === 0){
          val[i].children = undefined
        }else{
          this.editData(val[i].children)
        }
      }
      return val
    },
     async findpostion(){
     this.$http({
        url:this.$http.adornUrl('/hope/position'),
        method: 'get'
      }).then(({data}) => {
        this.positionOptionsOne = data;
      })
      await this.$http({
        url:this.$http.adornUrl('/hope/positions'),
        method: 'get'
      }).then(({data}) => {
        this.positionOptions = this.editData(data);
      })
      },

        deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/resume/workexperience/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
            } else {
              this.$message.error(data.msg)
            }
          })
          this.visible = false
          this.reload();
        })
      },
      addOrUpdateHandle(row){
        this.pd=1;
           this.dataForm.id=row.id;
                 this.dataForm.name=row.name;
                 this.dataForm.industry=row.industry;
                 this.dataForm.department=row.department;
                 this.dataForm.positionName=row.positionName;
                 this.dataForm.inDate=row.inDate;
                 this.type1=JSON.parse(row.type);
                 this.dataForm.outDate=row.outDate;

                 this.dataForm.resumeId=row.resumeId;
                 this.dataForm.content=row.content;
      },
       handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      }
  },
  mounted(){
    this.find();
  }
  }
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
